<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>数据 </title>
    <link rel="stylesheet" href="/css/basic.css" type="text/css"/>

    <script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <link rel="stylesheet" href="/mui/css/mui.min.css">
    <link href="/mui/css/mui.picker.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="/css/style.css" type="text/css"/>
</head>
<body>

<div class="mui-content">

    <div class="data-wrapper">
        <div class="data-tab-box">
            <a href="/media/media_statistics" class="data-item active">
                新媒体数据统计
            </a>
            <a href="/media/live_statistics" class="data-item ">
                直播数据统计
            </a>
        </div>
    </div>
    <div class="content-wrap">
        <!-- 新媒体数据统计 -->
        <div class="media-data-box">
            <div class="mb30">
                <div class="input-box select" id='showUserPicker'>
                    <div id="account"></div>
                </div>
            </div>
            <div class="data-detail-box">
                <div class="data-detail-item">
                    <label>总粉丝数</label>
                    <div id="fanNum">
                        0
                    </div>
                </div>
                <div class="data-detail-item">
                    <label>总点赞数</label>
                    <div id="likeNum">
                        0
                    </div>
                </div>
            </div>
            <div class="chart-box">
                <div class="mui-content-padded">
                    <h5>观看走势</h5>
                    <div class="chart" id="lineChart"></div>
                    <h5>点赞数据</h5>
                    <div class="chart" id="barChart"></div>
                </div>
            </div>

        </div>

    </div>


</div>
<div class="tab-bar-box">
    <div class="tab-bar">

        <a href="/" class="tab-bar-item">
            <img src="/v3/images/tarbar/icon_home.png" alt="">
            <p>首页</p>
        </a>
        <a href="/media/data_report_m"  class="tab-bar-item">
            <img src="/v3/images/tarbar/icon_data.png" alt="">
            <p>数据</p>
        </a>
        <a href="/media/media_statistics"  class="tab-bar-item">
            <img src="/v3/images/tarbar/icon_tongji_select.png" alt="">
            <p>统计</p>
        </a>
        <a href="/mine"  class="tab-bar-item active">
            <img src="/v3/images/tarbar/icon_user_select.png" alt="">
            <p>我的</p>
        </a>


    </div>
</div>

</body>
<script src="/mui/js/mui.min.js"></script>
<script src="/mui/js/mui.picker.min.js"></script>
<script src="/js/echarts-all.js"></script>
<script>
    var accountId

    (function($, doc) {
        // 选择账户
        $.init();
        $.ready(function() {
            /**
             * 获取对象属性的值
             * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
             * @param {Object} obj 对象
             * @param {String} param 属性名
             */
            var _getParam = function(obj, param) {
                return obj[param] || '';
            };
            var userPicker = new $.PopPicker();
            $.ajax({
                url: "/ajax/getMediaList",
                type: "get",
                dataType:"json",
                success:function (res) {
                    if(res.code == 0){
                        userPicker.setData(res.data);
                    }
                }
            })
            var showUserPickerButton = doc.getElementById('showUserPicker');
            var accoutBox = doc.getElementById('account'); // 直播账户

            showUserPickerButton.addEventListener('tap', function(event) {
                userPicker.show(function(items) {
                    var text = items[0].text // 账户被选中的项的文字
                    accountId = items[0].value // 账户被选中的项的值
                    accoutBox.innerText = text;
                    if(accountId){
                        // ajax
                        $.ajax({
                            url: "/ajax/getMediaData",
                            type: "POST",
                            data: JSON.stringify({accountId: accountId}),
                            dataType:"json",
                            contentType: 'application/json',
                            success:function (res) {
                                if(res.code == 0){
                                    // 线性数据
                                    var lineXdata = res.data.lineName
                                    var lineSeries = [{
                                        name: '观众数据',
                                        type: 'line',
                                        data: res.data.lineValue // 线数据
                                    }]
                                    // 柱形数据
                                    var barXdata = res.data.barName
                                    var barSeries = [{
                                        name: '点赞人数',
                                        type: 'bar',
                                        data: res.data.barValue,// 线数据
                                        barWidth:30
                                    }]
                                    lineOption.xAxis  = { data:lineXdata} // 柱形图x轴
                                    lineOption.series  = lineSeries // 柱形图x轴
                                    barOption.xAxis  = { data:barXdata} // 柱形图x轴
                                    barOption.series  = barSeries // 柱形图x轴
                                    console.log(doc.getElementById('fanNum'))
                                    doc.getElementById('fanNum').innerText = res.data.userCount // 粉丝数
                                    doc.getElementById('likeNum').innerText = res.data.zanCount // 点赞数
                                    initEcharts()
                                }
                            }
                        })

                    }
                });
            }, false);
        });

    })(mui, document);
</script>
<script>
    // 线形图--观看走势
    var lineOption =  {
        grid: {
            x: 35,
            x2: 10,
            y: 30,
            y2: 25
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}{d}'
        },
        toolbox: {
            show: false,
            feature: {
                mark: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: false
                },
                magicType: {
                    show: true,
                    type: ['line']
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        calculable: false,
        // x坐标
        xAxis: [{
            data: []
        }],
        yAxis: [{
            type: 'value',
            splitArea: {
                show: true
            }
        }],
        // 线代表量
        series: [{
            name: '观众数据',
            type: 'line',
            data: []
        }]
    }
    // 柱形图--点赞数据
    var barOption =  {
        grid: {
            x: 35,
            x2: 10,
            y: 30,
            y2: 25
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}{d}'
        },
        toolbox: {
            show: false,
            feature: {
                mark: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: false
                },
                magicType: {
                    show: true,
                    type: ['bar']
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        calculable: false,
        xAxis: [{
            data: []
        }],
        yAxis: [{
            type: 'value',
            splitArea: {
                show: true
            }
        }],
        series: [{
            name: '点赞人数',
            type: 'bar',
            data: []
        }]
    }
    initEcharts()
    function byId(id) {
        return document.getElementById(id);
    };
    function initEcharts(){
        var barChart = echarts.init(byId('barChart'));
        barChart.setOption(barOption);
        var lineChart = echarts.init(byId('lineChart'));
        lineChart.setOption(lineOption);
    }
</script>
</html>